<template>
    <div >
        <div class="header clearfix">
            <span class="title" v-if="!isSetPlan">当前未设置营业时间,请设置营业时间</span>
            <span class="isset" v-else>当前已设置营业时间</span>

            <div class="add-time" v-show="!isdisabled">
                <span >设置下拉时间间隔：</span>
                <el-select v-model="timeInterval" style="width: 100px"  placeholder="--">
                    <el-option v-for="(item,index) in timeIntervalList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="main">

            <div class="clearfix">
                <ul class="time-list">
                    <li class="clearfix" v-for="(items,index1) in time" :key="index1">
                        <div class="time-l">
                            营业开始时间 ：
                            <el-time-select  style="width: 150px;" align="center" v-model="items.start" :disabled ="isdisabled"  @change ="selectTime(index1,1)" :clearable="false"
                                             :editable="false" :picker-options="{start:index1>0?time[index1-1].end:'00:00',step:timeInterval,end: '23:50'}"  placeholder="任意时间点">

                            </el-time-select>
                        </div>
                        <div class="time-c">
                            营业开始时间 ：
                            <el-time-select style="width: 150px;" align="center" v-model="items.end" :disabled ="isdisabled"  @change ="selectTime(index1,2)" :clearable="false"
                                            :editable="false" :picker-options="{start: items.start,step:timeInterval,end: '23:50'}"  placeholder="任意时间点">

                            </el-time-select>
                        </div>

                        <div class="time-r">
                            <el-select v-model="items.planId" style="width: 130px"  placeholder="选择方案" :disabled ="isdisabled">
                                <el-popover   v-for="(item,index2) in planlist" :key="item.id"
                                              placement="right"  width="400"  trigger="hover">
                                    <div class="list clearfix">
                                        <div class="wrap" style="float: left;margin-right: 50px;">
                                            <div class="title"> 距离：</div>
                                            <ul>
                                                <li>
                                                    <span>{{item.startDistance?item.startDistance+'公里内':'系统默认最大距离内'}}</span>
                                                    <span class="right">{{item.startDistancePrice}}元</span>
                                                </li>
                                                <li v-if="item.firstDistancePrice">
                                                    <span v-if="item.firstDistance">{{item.startDistance}}~{{item.firstDistance}}公里</span>
                                                    <span v-else>{{item.startDistance}}公里以上</span>
                                                    <span class="right">每公里/{{item.firstDistancePrice}}元</span>
                                                </li>
                                                <li v-if="item.secondDistancePrice">
                                                    <span v-if="item.secondDistance">{{item.firstDistance}}~{{item.secondDistance}}公里</span>
                                                    <span v-else>{{item.firstDistance}}公里以上</span>
                                                    <span class="right">每公里/{{item.secondDistancePrice}}元</span>
                                                </li>
                                                <li v-if="item.thirdDistancePrice">
                                                    <span v-if="item.thirdDistance">{{item.secondDistance}}~{{item.thirdDistance}}公里</span>
                                                    <span v-else="">{{item.secondDistance}}公里以上</span>
                                                    <span class="right">每公里/{{item.thirdDistancePrice}}元</span>
                                                </li>
                                                <li v-if="item.fourthDistancePrice">
                                                    <span v-if="item.fourthDistance">{{item.thirdDistance}}~{{item.fourthDistance}}公里</span>
                                                    <span v-else>{{item.thirdDistance}}公里以上</span>
                                                    <span class="right">每公里/{{item.fourthDistancePrice}}元</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="wrap clearfix" style="float: left;">
                                            <div class="title"> 重量：</div>
                                            <ul>
                                                <li>
                                                    <span>{{item.startWeight?item.startWeight+'KG内':'系统默认最大重量内'}}</span>
                                                    <span class="right">{{item.startWeightPrice}}元</span>
                                                </li>
                                                <li v-if="item.firstWeightPrice">
                                                    <span v-if="item.firstWeight">{{item.startWeight}}~{{item.firstWeight}}KG</span>
                                                    <span v-else>{{item.startWeight}}KG以上</span>
                                                    <span class="right">每KG/{{item.firstWeightPrice}}元</span>
                                                </li>
                                                <li v-if="item.secondWeightPrice">
                                                    <span v-if="item.secondWeight">{{item.firstWeight}}~{{item.secondWeight}}KG</span>
                                                    <span v-else>{{item.firstWeight}}KG以上</span>
                                                    <span class="right">每KG/{{item.secondWeightPrice}}元</span>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                    <el-option  slot="reference"  :label="item.name" :value="item.id" >
                                    </el-option>
                                </el-popover>

                            </el-select>
                        </div>
                        <div class="time-m" v-if="(items.start||items.end||items.planId) &&(index1<=3?(!time[index1+1].start&&!time[index1+1].end&&!time[index1+1].planId):true)" @click="clearDistanceItem(index1)">
                            <el-button type="info" icon="el-icon-close"  class="clear" round size="mini"></el-button>
                        </div>
                    </li>
                </ul>

            </div>

            <div class="btn">
                <el-button  type="primary" v-if="!isdisabled" :loading="isloading" icon="el-icon-circle-plus-outline" @click="addTimePlan()">保存</el-button>
                <el-button  type="danger" v-else icon="el-icon-edit"  @click="editTimePlan()">修改</el-button>

            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data () {
            return {
                isloading:false,                             //保存loading
                timeInterval:'00:05',                       //默认时间间隔
                timeIntervalList:[                           //时间间隔
                    {label:'1分钟',value:'00:01'},
                    {label:'5分钟',value:'00:05'},
                    {label:'10钟',value:'00:10'},
                    {label:'15分钟',value:'00:15'},
                    {label:'30分钟',value:'00:30'},
                    {label:'一小时',value:'01:00'},
                    {label:'两小时',value:'02:00'}
                    ],
                isdisabled:'',                              //修改或提交
                isSetPlan:'',                                  //头部提示是否设置方案
                planlist:[],                                   //方案列表
                time:[                                         //营业时间数据
                    {start:null,end:null,planId:null},
                    {start:null,end:null,planId:null},
                    {start:null,end:null,planId:null},
                    {start:null,end:null,planId:null},
                    {start:null,end:null,planId:null}
                ]
            };
        },
        methods:{
            alertNoprice(msg,title){                    //弹出提示
                this.$alert(msg, title, {
                    confirmButtonText: '确定',
                    closeOnPressEscape:true,
                    callback: action => {}
                })
            },
           /* addTimeStep(){
                if(this.time.length >=5){
                    this.alertNoprice('最多添加5层！','添加时间提示！')
                    return false
                }
                this.time.push({start:null,end:null,planId:null})
                console.log(this.time)
            },*/
            editTimePlan(){                         //修改方案
                this.isdisabled = !this.isdisabled
            },
            clearDistanceItem(index){              //清除step当前数据
                this.time[index].start = null
                this.time[index].end = null
                this.time[index].planId = null
            },
            timeComparison(s,e){                   //时间对比  s>e 返回true
               let _s = s.split(':');
               let _e = e.split(':');
               if(_s[0] >_e[0]){
                    return true
               }else if(_s[0] == _e[0] && _s[1] >_e[1]){
                    return true
               }
               return false
            },
            selectTime(cur,type){
                if(type == 1 &&this.time[cur].end &&this.timeComparison(this.time[cur].start, this.time[cur].end)) {
                    this.time[cur].end = null
                    this.time.forEach((item,index)=>{
                        if(cur < index){
                            this.time[index].start = null
                            this.time[index].end = null
                        }
                    })
                }else if(type ==2 &&cur < 4 && this.time[cur+1].start && this.timeComparison(this.time[cur].end, this.time[cur+1].start)){
                    this.time.forEach((item,index)=>{
                        if( cur < index){
                            this.time[index].start = null
                            this.time[index].end = null
                        }
                    })
                }
            },
            addTimePlan(){
                let  params = {
                    name:this.name,
                    firstStartTime:this.time[0].start||null,
                    firstEndTime:this.time[0].end ||null,
                    firstPlanId:this.time[0].planId ||null,
                    secondStartTime:this.time[1].start||null,
                    secondEndTime:this.time[1].end ||null,
                    secondPlanId:this.time[1].planId ||null,
                    thirdStartTime:this.time[2].start||null,
                    thirdEndTime:this.time[2].end ||null,
                    thirdPlanId:this.time[2].planId ||null,
                    fourthStartTime:this.time[3].start||null,
                    fourthEndTime:this.time[3].end ||null,
                    fourthPlanId:this.time[3].planId ||null,
                    fifthStartTime:this.time[4].start||null,
                    fifthEndTime:this.time[4].end ||null,
                    fifthPlanId:this.time[4].planId ||null,
                }

                this.isloading = true
                this.$http.post('/server/businessHours/save',this.qs.stringify(params))
                    .then(res => {
                        this.isloading = false
                        const datas = res.data
                        if(datas.success){

                        }else{
                            this.alertNoprice(datas.errorMsg,'修改营业提示！')
                        }
                    })
                    .catch(err => {
                        this.isloading = false
                    })

            },
            getbusinessHours(){                                 //获取营业时间设置
                this.$http.get('/server/businessHours/list')
                    .then(res => {
                        const datas = res.data
                        if(datas.success){
                            this.getPlanList()
                            if(datas.data.list.length > 0){
                                let list = datas.data.list
                                this.isdisabled = true
                                this.isSetPlan = true
                                this.time = [
                                    {
                                        start:list.firstStartTime ==null?null:list.firstStartTime.toString(),
                                        end:list.firstEndTime==null?null:list.firstEndTime.toString(),
                                        planId:list.firstPlanId==null?null:list.firstPlanId.toString()
                                    },
                                    {
                                        start:list.secondStartTime ==null?null:list.secondStartTime.toString(),
                                        end:list.secondEndTime==null?null:list.secondEndTime.toString(),
                                        planId:list.secondPlanId==null?null:list.secondPlanId.toString()
                                    },
                                    {
                                        start:list.thirdStartTime ==null?null:list.thirdStartTime.toString(),
                                        end:list.thirdEndTime==null?null:list.thirdEndTime.toString(),
                                        planId:list.thirdPlanId==null?null:list.thirdPlanId.toString()
                                    },
                                    {
                                        start:list.fourthStartTime ==null?null:list.fourthStartTime.toString(),
                                        end:list.fourthEndTime==null?null:list.fourthEndTime.toString(),
                                        planId:list.fourthPlanId==null?null:list.fourthPlanId.toString()
                                    },
                                    {
                                        start:list.fifthStartTime ==null?null:list.fifthStartTime.toString(),
                                        end:list.fifthEndTime==null?null:list.fifthEndTime.toString(),
                                        planId:list.fifthPlanId==null?null:list.fifthPlanId.toString()
                                    },
                                ]

                            }else{
                                this.isdisabled = false
                                this.isSetPlan = false
                            }
                        }else{
                            this.alertNoprice(datas.errorMsg,'提交营业时间提示！')
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器


                    })
            },
            getPlanList(){                     //获取方案列表
                this.$http.get('/server/pricePlan/list')
                    .then(res => {
                        const datas = res.data
                        if(datas.success){
                            if(datas.data.list.length >0){
                                this.$set(this.$data,'planlist',datas.data.list)
                            }

                        }else{
                            this.alertNoprice(datas.errorMsg,'获取方案列表提示！')
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器
                        this.isloading = false
                        if(!err.Cancel){
                            console.log(err)
                        }
                    })
            }
        },
        mounted() {
            this.getbusinessHours()
            //this.getPlanList()
        },
    }
</script>
<style scoped>
    .header{
        padding: 10px 15px;
        line-height:30px;
        background: #fff;
    }
    .header .add-time{
        float:right;
    }
    .header .title{
        font-size: 16px;
        color:#f56c6c;
        font-weight: 500;
    }
    .header .isset{
        font-size: 16px;
        color:#67c23a;
        font-weight: 500;
    }
    .main{
        background: #fff;
        padding:20px 15px 20px 15px;
        border-top:1px solid #e5e5e5;
    }

    .time-list{
        float: left;
    }
    .time-list li{
        line-height: 50px;
    }

    .time-list li .time-l{
        float: left;
    }
    .time-list li .time-c{
        margin-left: 50px;
        float: left;
    }
    .time-list li .time-r{
        margin-left: 50px;
        float:left;
    }
    .time-list li .time-m{
        margin-left: 50px;
        float:left;
    }
    .time-list li .time-m .clear{
        border-radius: 100%;
        padding: 3px 3px;
    }
    .time-r .list .wrap li .title{
        font-size: 14px;
        font-weight: 500;
    }
    .time-r .list .wrap li{
        line-height: 30px;
        width: 140px;
        color:#6d6c6c;
    }
    .time-r .list .wrap li .right{
        float:right;
    }
    .main .btn{
        margin-top: 20px;
    }
</style>
</style>